<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<!-- 
		实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
	-->
	<div id="app">
		<p>input 元素：</p>
		<input v-model="message" placeholder="编辑我……">
		<p>消息是: {{ message }}</p>
		<p>textarea 元素：</p>
		<p style="white-space: pre">{{ message2 }}</p>
		<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Runoob',
    			message2: '菜鸟教程\r\nhttp://www.runoob.com'
			}
		});
	</script>
	<h1>****************</h1>
	<!-- 
		复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
	 -->
	<div id="app2">
		<p>单个复选框：</p>
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label>
			
		<p>多个复选框：</p>
		<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
		<label for="runoob">Runoob</label>
		<input type="checkbox" id="google" value="Google" v-model="checkedNames">
		<label for="google">Google</label>
		<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
		<label for="taobao">taobao</label>
		<br>
		<span>选择的值为: {{ checkedNames }}</span>
	</div>
	<script>
		var app2 = new Vue({
			el: '#app2',
			data: {
				checked : false,
				checkedNames: []
			}
		})
	</script>
	<h1>****************</h1>
	<!-- 
		以下实例中演示了单选按钮的双向数据绑定
	 -->
	<div id="app4">
		<input type="radio" id="runoob" value="Runoob" v-model="picked">
		<label for="runoob">Runoob</label>
		<br>
		<input type="radio" id="google" value="Google" v-model="picked">
		<label for="google">Google</label>
		<br>
		<span>选中值为: {{ picked }}</span>
	</div>
	   
	<script>
	  var app4 = new Vue({
		el: "#app4",
		data: {
		  picked : 'Runoob'
		}
	  })
	  </script>
	<h1>****************</h1>
	<!-- 
		以下实例中演示了下拉列表的双向数据绑定：
	 -->
	<div id="app5">
		<select v-model="selected" name="fruit">
			<option value="">选择一个网站</option>
			<option value="www.runoob.com">Runoob</option>
			<option value="www.google.com">Google</option>
		</select>
		
		<div id="output">
			选择的网站是: {{selected}}
		</div>
	</div>
	   
	<script>
	var app5 = new Vue({
		el: '#app5',
		data: {
			selected: '' 
		}
	})
	</script>
	<h1>****************</h1>
	<!-- 
		以下实例中演示了下拉列表的双向数据绑定
	 -->
	<div id="app5">
		<select v-model="selected" name="fruit">
			<option value="">选择一个网站</option>
			<option value="www.runoob.com">Runoob</option>
			<option value="www.google.com">Google</option>
		</select>
		
		<div id="output">
			选择的网站是: {{selected}}
		</div>
	</div>
	<script>
		var app5 = new Vue({
			el: '#app5',
			data: {
				selected: '' 
			}
		})
	</script>
	<h1>****************</h1>
	<!-- 
		在默认情况下， v-model 在 input 事件中同步输入框的值与数据，
		但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
	 -->
	<div id="app6">
		<!-- 在 "change" 而不是 "input" 事件中更新 -->
		<input v-model.lazy="msg" >
		<p>{{msg}}</p>
	</div>
	<script>
		var app6 = new Vue({
			el: '#app6',
			data: {
				msg: '123' 
			}
		})
	</script>
	<h1>****************</h1>
	<!-- 
		如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），
		可以添加一个修饰符 number 给 v-model 来处理输入值：
	 -->
	<div id="app7">
		<!-- 在 "change" 而不是 "input" 事件中更新 -->
		<input  v-model.number="age" type="number"/>
		<p>{{age}}</p>
	</div>
	<script>
		var app7 = new Vue({
			el: '#app7',
			data: {
				age: '123' 
			}
		})
	</script>
	<h1>****************</h1>
</body>
</html>
